<!-- 找回密码页面 -->
<template>
    <div class="login-wrap">
        <!-- left common -->
        <div class="login-banner"></div>
        <div class="login-right">
            <div class="login-content">
                <p class="login-tipe">找回密码</p>
                <el-form ref="resetForm" :rules="rules" :model="resetForm">
                    <el-form-item prop="phone">
                        <el-input v-model="resetForm.phone" placeholder="输入手机号" minlength="11" maxlength="11">
                            <i class="el-icon-phone-outline el-input__icon" slot="prefix"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-col :span="12">
                            <el-input v-model.trim="resetForm.code" placeholder="验证码" maxlength="6" @keyup.enter.native="login()">
                                <i class="el-icon-discount el-input__icon" slot="prefix"></i>
                            </el-input>
                        </el-col>
                        <el-col :span="12" class="form-validate">
                            <el-button class="validate" :disabled="disabled" @click="getPnoneVerCode()">{{ btnMsg }}</el-button>
                        </el-col>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="resetForm.password" placeholder="输入密码" minlength="11" maxlength="11">
                            <i class="el-icon-lock el-input__icon" slot="prefix"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="validate">
                        <el-col :span="12">
                            <el-input v-model.trim="resetForm.validate" placeholder="验证码" maxlength="4" @keyup.enter.native="login()">
                                <i class="el-icon-discount el-input__icon" slot="prefix"></i>
                            </el-input>
                        </el-col>
                        <el-col :span="12" class="form-validate">
                            <img :src="codeUrl" @click.prevent="getCode()" class="ver-code" />
                        </el-col>
                    </el-form-item>
                </el-form>
                <div class="login-button" @click.prevent="submitForm('resetForm')">找回密码</div>
                <div class="other-box" @click="goLogin()">已有账号返回登录</div>
            </div>
        </div>
    </div>
</template>

<script>
import validate from '@/js/login/login.js';
import request from '@/js/util/url.js';
import PATH from '@/js/util/path.js';
import message from '@/js/util/message.js';
import { encrypt } from '@/js/util/encrypt.js';

export default {
    data() {
        return {
            resetForm: {
                phone: '',
                code: '',
                password: '',
                validate: '',
                token: ''
            },
            codeUrl: '',
            btnMsg: '获取验证码',
            disabled: false,
            timer: null,
            maxtime: 60,
            rules: {
                phone: [{ required: true, validator: validate.validatePass, trigger: 'blur' }],
                password: [
                    { required: true, message: '请填写密码', trigger: 'blur' },
                    {
                        min: 6,
                        max: 18,
                        message: '长度在 6 到 18 个字符',
                        trigger: 'blur'
                    }
                ],
                code: [{ required: true, message: '请填写验证码', trigger: 'blur' }],
                validate: [{ required: true, message: '请填写图形验证码', trigger: 'blur' }]
            }
        };
    },
    created() {
        this.getCode();
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let { code, password, phone, validate, token } = this.resetForm;
                    let params = {
                        code: code,
                        b: encrypt(password),
                        c: encrypt(phone),
                        validate: validate,
                        token: token
                    };
                    let result = request.resetPassword(params);
                    if (result.state.code === 10000) {
                        message.message('重置成功');
                        this.goLogin();
                    } else {
                        message.message(result.body.message, 'error');
                        this.resetForm.validate = '';
                        this.getCode();
                    }
                } else {
                    return false;
                }
            });
        },
        getCode() {
            let result = request.getValidateCode();
            if (result.state.code == 10000) {
                this.resetForm.token = result.body.message.token;
                this.codeUrl = result.body.message.image;
            }
        },
        goLogin() {
            this.$router.push({ path: PATH.LOGIN });
        },
        resetToForm(formName) {
            this.btnmsg = this.$options.data().btnmsg;
            this.maxtime = this.$options.data().maxtime;
            this.disabled = this.$options.data().disabled;
            clearInterval(this.timer);
            this.$refs[formName].resetFields();
        },
        getPnoneVerCode() {
            if (!validate.phone(this.resetForm.phone)) {
                message.message('请输入正确的手机号', 'error');
            } else {
                const params = {
                    phone: this.resetForm.phone
                };
                let result = request.getUserCode(params);
                if (result.state.code === 10000) {
                    message.message('发送成功，请查看手机');
                    this.startTimeBar(60);
                } else {
                    message.message(result.body.message, 'error');
                    this.startTimeBar(5);
                }
            }
        },
        startTimeBar(num) {
            if (this.disabled) {
                this.getPnoneVerCode();
            }
            this.maxtime = num;
            this.disabled = true;
            this.timer = setInterval(() => {
                this.startCountDown();
            }, 1000);
        },
        startCountDown() {
            if (this.maxtime >= 0) {
                this.btnmsg = `${this.maxtime}S`;
                this.maxtime--;
            } else {
                clearInterval(this.timer);
                this.disabled = false;
                this.btnmsg = '重新获取';
            }
        }
    }
};
</script>

<style lang='scss' scoped>
@import url('@/css/login/login.scss');
</style>